<template>
    <div>
      <h3>这是第十个demo:watch:监听reactive:引用数据类型</h3>
      <p>我叫{{person.name}},今年{{person.age}}岁</p>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changePerson">修改person</button>
    </div>
  </template>
  
  <script setup lang="ts" name="Demo10">
  import { reactive, watch} from 'vue'
  let person = reactive({
      name:"孙悟空",
      age:500
  })
  function changeName() {
      person.name = '唐僧';
  }
  function changeAge() {
      person.age = 300;
  }
  function changePerson() {
      Object.assign(person,{name:'哪吒',age:10})
  }
  // reactive默认开启深度监听，但是立即监听仍然需要手动设置参数
  watch(person,(newValue,oldValue) => {
      console.log('改变了',newValue,oldValue)
  })
  </script>
  <style lang='scss' scoped>
  
  </style>